<template>
  <div class="consult-detail-container">
    <div class="consult-header">
      <h1>咨询了解详情</h1>
      <p>欢迎了解我们的服务，如有任何疑问请随时联系我们</p>
    </div>

    <div class="consult-content">
      <div class="service-info">
        <h2>服务内容</h2>
        <div class="info-grid">
          <div class="info-card">
            <div class="card-icon">🏥</div>
            <h3>24小时专业护理</h3>
            <p>专业的护理团队提供全天候的医疗护理服务</p>
          </div>
          <div class="info-card">
            <div class="card-icon">🍎</div>
            <h3>营养膳食定制</h3>
            <p>根据长者健康状况定制营养均衡的膳食</p>
          </div>
          <div class="info-card">
            <div class="card-icon">🏃‍♂️</div>
            <h3>康复训练指导</h3>
            <p>专业的康复师指导长者进行康复训练</p>
          </div>
          <div class="info-card">
            <div class="card-icon">🎭</div>
            <h3>文化娱乐活动</h3>
            <p>丰富多彩的文化娱乐活动，丰富长者生活</p>
          </div>
        </div>
      </div>

      <div class="pricing-info">
        <h2>收费标准</h2>
        <div class="pricing-table">
          <div class="pricing-card">
            <h3>单人间</h3>
            <div class="price">¥5000-8000/月</div>
            <ul>
              <li>独立卫生间</li>
              <li>空调电视</li>
              <li>紧急呼叫系统</li>
              <li>每日清洁服务</li>
            </ul>
          </div>
          <div class="pricing-card">
            <h3>双人间</h3>
            <div class="price">¥3500-5500/月</div>
            <ul>
              <li>共享卫生间</li>
              <li>空调电视</li>
              <li>紧急呼叫系统</li>
              <li>每日清洁服务</li>
            </ul>
          </div>
          <div class="pricing-card">
            <h3>三人间</h3>
            <div class="price">¥2500-4000/月</div>
            <ul>
              <li>共享卫生间</li>
              <li>空调电视</li>
              <li>紧急呼叫系统</li>
              <li>每日清洁服务</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="policy-info">
        <h2>相关政策</h2>
        <div class="policy-list">
          <div class="policy-item">
            <h3>医保定点机构</h3>
            <p>我们是医保定点养老机构，支持医保结算</p>
          </div>
          <div class="policy-item">
            <h3>长期护理保险</h3>
            <p>符合条件的老人可享受长期护理保险待遇</p>
          </div>
          <div class="policy-item">
            <h3>政府补贴政策</h3>
            <p>符合政策的老人可享受政府相关补贴</p>
          </div>
        </div>
      </div>

      <div class="contact-form-section">
        <h2>在线咨询</h2>
        <div class="contact-form">
          <el-form :model="consultForm" :rules="consultRules" ref="consultFormRef" label-width="100px">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="consultForm.name" placeholder="请输入您的姓名"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="consultForm.phone" placeholder="请输入您的联系电话"></el-input>
            </el-form-item>
            <el-form-item label="咨询内容" prop="content">
              <el-input
                type="textarea"
                v-model="consultForm.content"
                :rows="4"
                placeholder="请输入您想要咨询的内容"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitConsult" :loading="submitting">
                提交咨询
              </el-button>
              <el-button @click="goBack">返回首页</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="contact-info">
        <h2>联系方式</h2>
        <div class="contact-details">
          <div class="contact-item">
            <span class="icon">📞</span>
            <div>
              <h4>咨询电话</h4>
              <p>400-123-4567</p>
            </div>
          </div>
          <div class="contact-item">
            <span class="icon">📍</span>
            <div>
              <h4>地址</h4>
              <p>天津市西青区XX街道XX号</p>
            </div>
          </div>
          <div class="contact-item">
            <span class="icon">📧</span>
            <div>
              <h4>邮箱</h4>
              <p>contact@smarteldercare.com</p>
            </div>
          </div>
          <div class="contact-item">
            <span class="icon">🕒</span>
            <div>
              <h4>服务时间</h4>
              <p>周一至周日 8:00-20:00</p>
            </div>
          </div>
        </div>
      </div>

      <div class="download-section">
        <h2>相关文件下载</h2>
        <div class="download-links">
          <div class="download-item">
            <div class="file-icon">📄</div>
            <div class="file-info">
              <h4>服务收费标准</h4>
              <p>详细的收费标准和说明</p>
            </div>
            <el-button type="primary" size="small" @click="downloadFile('pricing')">
              下载
            </el-button>
          </div>
          <div class="download-item">
            <div class="file-icon">📄</div>
            <div class="file-info">
              <h4>入住协议范本</h4>
              <p>入住协议模板和说明</p>
            </div>
            <el-button type="primary" size="small" @click="downloadFile('agreement')">
              下载
            </el-button>
          </div>
          <div class="download-item">
            <div class="file-icon">📄</div>
            <div class="file-info">
              <h4>政策文件</h4>
              <p>相关政府政策文件</p>
            </div>
            <el-button type="primary" size="small" @click="downloadFile('policy')">
              下载
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const consultFormRef = ref()
const submitting = ref(false)

const consultForm = reactive({
  name: '',
  phone: '',
  content: ''
})

const consultRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入咨询内容', trigger: 'blur' },
    { min: 10, message: '咨询内容至少10个字符', trigger: 'blur' }
  ]
}

const submitConsult = async () => {
  if (!consultFormRef.value) return
  
  try {
    await consultFormRef.value.validate()
    submitting.value = true
    
    // 模拟提交咨询信息
    setTimeout(() => {
      ElMessage.success('咨询信息提交成功！我们会尽快与您联系')
      consultFormRef.value.resetFields()
      submitting.value = false
    }, 1000)
  } catch (error) {
    ElMessage.error('请完善咨询信息')
  }
}

const goBack = () => {
  router.push('/')
}

const downloadFile = (type) => {
  let fileName = ''
  switch (type) {
    case 'pricing':
      fileName = '服务收费标准.pdf'
      break
    case 'agreement':
      fileName = '入住协议范本.pdf'
      break
    case 'policy':
      fileName = '政策文件.pdf'
      break
  }
  
  // 模拟文件下载
  ElMessage.success(`开始下载: ${fileName}`)
  // 实际项目中这里应该是真实的文件下载链接
}
</script>

<style scoped>
.consult-detail-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.consult-header {
  text-align: center;
  padding: 40px 0;
  background: white;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.consult-header h1 {
  color: #2c3e50;
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.consult-header p {
  color: #7f8c8d;
  font-size: 1.1rem;
}

.consult-content {
  max-width: 1200px;
  margin: 0 auto;
}

.service-info, .pricing-info, .policy-info, .contact-form-section, .contact-info, .download-section {
  background: white;
  padding: 40px;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.service-info h2, .pricing-info h2, .policy-info h2, .contact-form-section h2, .contact-info h2, .download-section h2 {
  color: #2c3e50;
  margin-bottom: 30px;
  font-size: 1.8rem;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.info-card {
  text-align: center;
  padding: 30px 20px;
  border: 1px solid #e1e8ed;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 15px;
}

.info-card h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.info-card p {
  color: #7f8c8d;
  line-height: 1.6;
}

.pricing-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.pricing-card {
  padding: 30px;
  border: 2px solid #e1e8ed;
  border-radius: 10px;
  text-align: center;
  transition: all 0.3s ease;
}

.pricing-card:hover {
  border-color: #3498db;
  transform: translateY(-5px);
}

.pricing-card h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 1.3rem;
}

.price {
  font-size: 1.8rem;
  color: #e74c3c;
  font-weight: bold;
  margin-bottom: 20px;
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-card li {
  padding: 8px 0;
  color: #7f8c8d;
  border-bottom: 1px solid #f1f1f1;
}

.pricing-card li:last-child {
  border-bottom: none;
}

.policy-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.policy-item {
  padding: 25px;
  background: #f8f9fa;
  border-radius: 10px;
  border-left: 4px solid #3498db;
}

.policy-item h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.policy-item p {
  color: #7f8c8d;
  line-height: 1.6;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.contact-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.contact-item .icon {
  font-size: 2rem;
}

.contact-item h4 {
  color: #2c3e50;
  margin-bottom: 5px;
}

.contact-item p {
  color: #7f8c8d;
  margin: 0;
}

.download-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.download-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  border: 1px solid #e1e8ed;
}

.download-item .file-icon {
  font-size: 2rem;
  margin-right: 20px;
}

.file-info {
  flex: 1;
}

.file-info h4 {
  color: #2c3e50;
  margin-bottom: 5px;
}

.file-info p {
  color: #7f8c8d;
  margin: 0;
}

@media (max-width: 768px) {
  .consult-header h1 {
    font-size: 2rem;
  }
  
  .info-grid, .pricing-table, .policy-list, .contact-details {
    grid-template-columns: 1fr;
  }
  
  .service-info, .pricing-info, .policy-info, .contact-form-section, .contact-info, .download-section {
    padding: 20px;
  }
  
  .download-item {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
}
</style>
